<template>
<div class="audioShare">
    <!-- 轮播图 -->
    <div class="swiperBox">
        <div class="swiperBox">
            <img v-lazy="posterImg" />
            <vue-canvas-poster :widthPixels="600" :painting="painting" @success="posterSuccess" @fail="posterFail"></vue-canvas-poster>
        </div>
    </div>
    <!-- 下面按钮 -->
    <div class="chooseBox">
        <!--是否展示个人手机号码-->
        <div class="chooseBox_showPhone" @click="showPhoneIconBtn">
            <div class="phoneImg">
                <img :src="showPhoneIcon?'https://youyang-cdn.mdshuzhi.com/upload/icon_xuanze@2x.png':'https://youyang-cdn.mdshuzhi.com/upload/icon_weixuan@2x.png'" />
            </div>
            <div class="showPhoneText">是否展示个人手机号码</div>
        </div>
        <div class="chooseBox_saveBtn">
            <div class="saveBtnBox" @click="saveImgBtn">
                <div class="imgWrap">
                    <img src="https://youyang-cdn.mdshuzhi.com/upload/icon_xiangce@2x.png" />
                    <span>保存到相册</span>
                </div>
            </div>
            <div class="saveBtnBox">
                <div class="imgWrap">
                    <img src="https://youyang-cdn.mdshuzhi.com/upload/icon_wechat@2x.png" />
                    <span>分享给好友</span>
                </div>
            </div>
        </div>
    </div>
    <mt-popup v-model="popupVisible" popup-transition="popup-fade" :modal="true" :closeOnClickModal="true" class="popup">
        <span class="popup-text">长按保存图片</span>
        <img v-lazy="posterImg" class="popup-image" />
    </mt-popup>
</div>
</template>

<script>
import controller from "@/components/controllers/controllers";
export default {
    name: "businessCard",
    data() {
        return {
            title: '小程序名片', //晒一晒，小程序名片
            popupVisible: false,
            showPhoneIcon: false,
            painting: {}, //海报图片生成配置
            userInfo: localStorage.getItem("userInfo") ? JSON.parse(localStorage.getItem("userInfo")) : {},
            telephone: "", //手机号码
            saveImage: "",
            cavImg: "https://tse1-mm.cn.bing.net/th/id/OIP.bNNaDh0yqigvzZYSCSne_AHaKP?pid=Api&rs=1",
            logo: "https://youyang-cdn.mdshuzhi.com/upload/pic_logo@2x.png",
            QRCode: "", //二维码图片
            width: 600,
            height: 900,
            hasLenLeft: 240,
            posterImg: "",
        };
    },
    timer: null,
    mounted() {
        let that = this
        controller.shareImg({
                type: 10, //类别
                token: localStorage.getItem("token")
            })
            .then(res => {
                console.log('shareImg', res)
                that.cavImg = res.baseData, //海报图片
                    that.userInfo = JSON.parse(localStorage.getItem("userInfo"))
                // 获取二维码
                that.$nextTick(() => {
                    that.makeShareImg();
                });
            })
    },
    methods: {
        makePoster() {
            this.painting = {
                width: "600px",
                height: "900px",
                background: "#fff",
                borderRadius: "8px",
                views: [{
                        type: "image",
                        url: this.cavImg, //海报图片
                        css: {
                            width: "600px",
                            height: "600px",
                            top: "0px",
                            left: "0px",
                        },
                    },
                    {
                        type: "image",
                        url: this.userInfo.portrait, //头像
                        css: {
                            top: "632px",
                            left: "24px",
                            borderRadius: "26px",
                            width: "52px",
                            height: "52px",
                        },
                    },
                    {
                        type: "text",
                        text: this.userInfo.nick + this.telephone, //用户名
                        css: [{
                            width: "500px",
                            maxLines: "2",
                            top: "640px",
                            left: "89px",
                            color: "#A8ACBB",
                            fontSize: "20px",
                        }, ],
                    },
                    {
                        type: "text",
                        text: "来有氧，一起听吧", //来有氧，一起听吧
                        css: [{
                            top: "685px",
                            left: "89px",
                            color: "#323232",
                            fontSize: "24px",
                        }, ],
                    },
                    {
                        type: "rect",
                        css: {
                            width: "580px",
                            height: "1px",
                            color: "#9B9B9B",
                            bottom: "167px",
                            left: "10px",
                        },
                    },
                    {
                        type: "image",
                        url: this.QRCode, //二维码
                        css: [{
                            bottom: "29px",
                            left: "21px",
                            width: "110px",
                            height: "110px",
                        }, ],
                    },
                    {
                        type: "text",
                        text: "长按识别二维码查看", //长按识别二维码查看
                        css: [{
                            bottom: "105px",
                            left: "150px",
                            color: "#A8ACBB",
                            fontSize: "24px",
                        }, ],
                    },
                    {
                        type: "image",
                        url: this.logo, //logo
                        css: [{
                            bottom: "41px",
                            left: "151px",
                            width: "40px",
                            height: "40px",
                        }, ],
                    },
                    {
                        type: "text",
                        text: "有氧FM", //有氧FM
                        css: [{
                            bottom: "51px",
                            left: "199px",
                            color: "#A8ACBB",
                            fontSize: "20px",
                        }, ],
                    },
                ],
            };
        },
        //   是否展示个人手机号码
        showPhoneIconBtn() {
            this.showPhoneIcon = !this.showPhoneIcon;
            let telephone = this.userInfo.mobile ? this.userInfo.mobile : "";
            let that = this;
            console.log(this.userInfo);
            // showPhoneIcon false为选择显示手机号
            if (this.userInfo.nick.length > 6) {
                this.hasLenLeft = 260;
            } else if (this.userInfo.nick.length <= 4) {
                this.hasLenLeft = 210;
            }
            this.telephone = this.showPhoneIcon ? " |  " + telephone : "";
            if (this.timer) {
                clearTimeout(this.timer);
            }
            this.timer = setTimeout(() => {
                that.makePoster();
            }, 300);
        },
        saveImgBtn() {
            this.popupVisible = true
        },
        // 海报生成成功
        posterSuccess(src) {
            console.log("海报生成成功", src);
            this.posterImg = src;
        },
        // 海报生成失败
        posterFail(err) {
            console.log("海报生成失败", err);
        },
        // 生成二维码
        /*
    参数：
    path：二维码扫描后跳转的页面
    scene：参数  如 a=3
  */
        makeShareImg() {
            controller
                .makeShareImg({
                    source: 2,
                    path: "https://www.youyangfm.com/"
                })
                .then((res) => {
                    console.log("生成二维码", res);
                    this.QRCode = res.baseData
                    this.makePoster();
                });
        },
    },
};
</script>

<style lang="scss" scoped>
.audioShare {
    background-color: #1a1c22;
    height: 1500px;
    overflow: hidden;

    .popup {
        background: transparent;

        .popup-image {
            width: 600px;
            max-width: 600px !important;
            height: 100%;
        }

        .popup-text {
            width: 100%;
            display: block;
            margin-bottom: 30px;
            font-size: 50px;
            color: #fff;
            text-align: center;
        }
    }

    .swiperBox {
        // width: 750px;

        .swiperBox {
            width: 600px;
            height: 900px;
            margin: 0 auto;
            margin-top: 50px;

            img {
                width: 100%;
                height: 100%;
                border-radius: 8px;
            }
        }
    }

    /* 选择 */
    .chooseBox {
        // width: 750px;
        padding: 0 75px;
        box-sizing: border-box;
        margin-bottom: 35px;

        /* 展示手机 */
        .chooseBox_showPhone {
            display: flex;
            align-items: center;
            margin-top: 32px;
            position: relative;

            .phoneImg,
            .phoneImg img {
                width: 36px;
                height: 36px;
            }

            .showPhoneText {
                font-size: 30px;
                color: #fff;
                margin-left: 14px;
            }
        }

        /* 保存按钮 */
        .chooseBox_saveBtn {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 87px;

            .saveBtnBox {
                flex: 1;
                height: 140px;
                display: flex;
                justify-content: center;
                align-items: center;

                .imgWrap {
                    width: 120px;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    position: relative;

                    img {
                        width: 90px;
                        height: 90px;
                        margin-bottom: 16px;
                    }

                    span {
                        font-size: 24px;
                        color: #fff;
                    }
                }
            }
        }
    }
}
</style>
